<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="输入搜索" prop="name">
        <el-input v-model="queryParams.content" placeholder="车辆名称/车牌号/驾驶员" clearable style="width: 300px;" />
      </el-form-item>
      <el-form-item label="作业状态:" prop="status" class="el-form-item">
        <el-select v-model="queryParams.workStatus" placeholder="请选择状态" clearable style="width: 240px">
          <el-option v-for="dict in work_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="当前告警:" prop="status" class="el-form-item">
        <el-select v-model="queryParams.alarmStatus" placeholder="请选择状态" clearable style="width: 240px">
          <el-option v-for="dict in alarm_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询结果</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="tables" v-loading="loading" :data="list">
      <el-table-column label="车辆图片" align="center">
        <template slot-scope="{ row }">
          <el-image style="width: 50px; height: 50px" :src="formattedHeadIcon(row.imageUrl)" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="车辆名称" align="center" prop="name" />
      <el-table-column label="车辆号码" align="center" prop="carNumber" />
      <el-table-column label="车辆分类" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.classify == 0">清理车</div>
          <div v-if="row.classify == 1">清运车</div>
        </template>
      </el-table-column>
      <el-table-column label="作业状态" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.workStatus == 0">空闲中</div>
          <div v-if="row.workStatus == 1">作业中</div>
        </template>
      </el-table-column>
      <el-table-column label="当前告警" align="center">
        <template slot-scope="{ row }">
          <div>{{ row.alarm ? row.alarm : "--" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="locationTime" />
      <el-table-column label="定位位置" align="center" prop="location" />
      <el-table-column label="驾驶人" align="center" prop="driver" />
      <el-table-column label="手机号" align="center" prop="driverPhone" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)">作业情况</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { arealist, delRegion } from "@/api/system/area";
const prefix = process.env.VUE_APP_CDN_HOST;
export default {
  name: "Operlog",
  data() {
    return {
      //作业状态
      work_status: [
        { value: '0', label: '空闲中' },
        { value: '1', label: '作业中' },
      ],
      //当前告警
      alarm_status: [
        { value: '0', label: '无' },
        { value: '1', label: '超速行驶' },
        { value: '2', label: '违规作业' },
      ],
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        content: undefined,
      },
    };
  },
  created() {
    this.loading = false;
    this.getList();
  },
  methods: {
    formattedHeadIcon(icon) {
      return prefix + icon;
    },
    /** 查询登录日志 */
    getList() {
      this.loading = true;
      arealist(this.addDateRange(this.queryParams)).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      }
      );
    },
    // 修改
    handleView(row) {
      console.log(row)
      this.$router.push({ path: '/control/workCar/detail', query: { id: row.id } })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  }
};
</script>
<style lang="scss" scoped>
.manage-add-btn {
  float: right;
}

.dialog-footer {
  text-align: center;
}
</style>
